<template>
  <div >
    <div class='app-container'>
      <el-form ref="form" label-width="80px" inline :model="form" >
  <el-form-item label="工单编号" >
    <el-input v-model="form.taskCode" palceholder='请输入'></el-input>
  </el-form-item>
  <el-form-item label="工单状态">
     <el-select v-model="form.status" placeholder="请选择活动区域" @focus='gettstatus' clearable>
      <el-option 
      v-for='item in status' :key='item.statusId'
      :label="item.statusName" :value="item.statusId" ></el-option>
      <!-- <el-option label="进行" value="进行"></el-option>
      <el-option label="取消" value="取消"></el-option>
      <el-option label="完成" value="完成"></el-option> -->
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click='search'><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div>
  <div class='app-container'>
   <el-card shadow="always">
      <el-button type="primary" class='config1' icon="el-icon-plus" @click="add">新建</el-button>
    </el-card>
    <el-table style="width: 100%" :data='list'>
      <el-table-column
        label="序号"
        type='index'
        :index='getIndex'
        >
      </el-table-column>
      <el-table-column
        prop="taskCode"
        label="工单编号"
        >
      </el-table-column>
      <el-table-column
        prop="innerCode"
        label="设备编号">
      </el-table-column>
         <el-table-column
        prop="taskType.typeName"
        label="工单类型">
      </el-table-column>
       <el-table-column
        prop="method"
        label="工单方式">
        </el-table-column>
        <el-table-column
        prop="taskStatusTypeEntity.statusName"
        label="工单状态">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="运营人员">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>
      <el-table-column
        label="操作">
        <template #default='{row}'>
        <el-button type="text" @click='detail(row)'>查看详情</el-button>
        </template>
      </el-table-column>
      
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=getList(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=getList(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>

    
  <add :visible.sync='visible' ref='add'></add>
  <detail :detaill.sync='detaill' :row='row' @edit='edit'></detail>
  </div>
</template>
<script>
import Add from './components/add.vue'
import Detail from './components/detail.vue'
import {getListApi,searchApi,gettstatus} from '@/api/order'
export default {
    name: 'yunweigongdan',
    components:{
    Add,
    Detail
  },
    data() {
        return {
             form:{
        taskCode: '',
        status: '',
      },
        list:[],
        visible:false,
        // 工单配置
        order:false,
        // 查看详情
        detaill:false,
        row:{},
        params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
        // 状态
        status:[]
        };
    },

    mounted() {
        
    },
     created() {
    this.getList()
    this.gettstatus()
  },

    methods: {
          async getList(num=0){
    this.params.pageIndex=+this.params.pageIndex+num
      const res =await getListApi(this.params)
      console.log(res,'res的结果是什么');
      this.params.pageIndex=res.pageIndex
      this.params.totalPage=res.totalPage
      console.log(res.currentPageRecords);
      this.list=res.currentPageRecords
      this.list.forEach(ele => {
        ele.method = '手动'
      })
      this.params.totalCount = parseInt(res.totalCount)
      console.log(this.list,'真个页面结果是什么');
    },
    // 新增工单
    add(){
      this.visible=true
    },

    // 查看详情
    detail(row){
      this.detaill=true
      console.log(row,'row是啥');
      this.row=row
    },
    // 查询
   async search(){
      const res= await searchApi(this.form)
      console.log(res,'hhhhhhhhh');
      this.list=res.currentPageRecords
    },
  // 排序延续
  getIndex (index) {
  const page = this.params.pageIndex
  const pagesize = this.params.pageSize//当前页数 - 1*每页数据条数 + index + 1
  return (page - 1) * pagesize + index + 1},
  // 获取工单状态
  async gettstatus(){
    const res = await gettstatus()
    console.log(res,'能获取工单状态吗');
    this.status=res
  },
  // 重新创建
  edit(row){
    this.detaill=false
    this.visible=true
    console.log(row,'row的数据传递过来了吗');
    // const {createType,innerCode,userId,productTypeId:productType,desc,details} = row
    // this.$refs.add.form={createType,innerCode,userId,productType,desc,details}
    this.$refs.add.form={...row}
    // console.log(this.$refs.add.form,'好奇这个数据');
  },
    },
};
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config{
  background-color: #fbf4f0;
  color:#655b56;
  border:none;
  cursor: pointer;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.el-table{
  padding: 10px;
  border:none
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>